<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>{% block title %}IT资产管理平台{% endblock %}</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
  <link href="{{ url_for('static', filename='font-awesome/css/all.min.css') }}" rel="stylesheet">
  {% block styles %}{% endblock %}
</head>
<body>
  <!-- 顶部导航栏 -->
  <header class="top-nav">
    <div class="top-nav-left">
      <h1>IT资产管理平台</h1>
    </div>
    <div class="top-nav-right">
      <a href="{{ url_for('change_password') }}">更改密码</a>
      <a href="{{ url_for('logout') }}">退出登录</a>
    </div>
  </header>
  <!-- 侧边栏 -->
  <aside class="sidebar">
    <ul class="sidebar-menu">
      <li><a href="{{ url_for('home') }}">首页</a></li>
      <li><a href="{{ url_for('hosts') }}">主机管理</a></li>
      <li><a href="{{ url_for('middlewares') }}">中间件管理</a></li>
      <li class="has-submenu">
        <a href="javascript:void(0);">系统设置</a>
        <ul class="submenu">
          <li><a href="{{ url_for('host_attributes') }}">主机属性设置</a></li>
          <li><a href="{{ url_for('middleware_attributes') }}">中间件属性设置</a></li>
        </ul>
      </li>
    </ul>
  </aside>
  <!-- 主体内容区域 -->
  <main class="main-content">
    {% block content %}{% endblock %}
  </main>
  {% block scripts %}
  <script>
    // 侧边栏二级菜单处理
    document.addEventListener('DOMContentLoaded', function(){
      document.querySelectorAll('.has-submenu').forEach(function(item) {
        item.classList.remove('active');
      });
      document.querySelectorAll('.has-submenu > a').forEach(function(link) {
        link.addEventListener('click', function(e) {
          e.preventDefault();
          var parentLi = this.parentElement;
          parentLi.classList.toggle('active');
        });
      });
    });
    // 点击页面其他区域收回展开的子菜单
    document.addEventListener('click', function(e) {
      document.querySelectorAll('.has-submenu.active').forEach(function(item){
        if (!item.contains(e.target)) {
          item.classList.remove('active');
        }
      });
    });
  </script>
  {% endblock %}
</body>
</html>
